<template>
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="workshopCancelStocks">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchData" auto-label-width>
                            <a-row :gutter="16">
                                <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="客户名称">
                                        <a-input class="aInput" allow-clear v-model="searchData.clientName" />
                                    </a-form-item>
                                </a-col>
                                <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="开单日期">
                                        <a-range-picker  popup-container="html"  class="aInput" allow-clear @change="changTime" />
                                    </a-form-item>
                                </a-col>
                                <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="退库单号">
                                        <a-input class="aInput" allow-clear v-model="searchData.retreatLibraryNum" />
                                    </a-form-item>
                                </a-col>
                                <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="退库类型">
                                        <a-input class="aInput" allow-clear v-model="searchData.retreatLibraryType" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="布号">
                                        <a-input class="aInput" allow-clear v-model="searchData.clothNum" />
                                    </a-form-item>
                                </a-col>
                                <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="品名">
                                        <a-input class="aInput" allow-clear v-model="searchData.productName" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="margin-bottom: 10px;">
                        <Toolbar :items="['查询', '新增', '删除', '导出']" @select="selectHandler" @add="addHandler"
                            v-if="handlerState === 1" @export="exportHandler" @del="delHandler" />
                        <Toolbar :items="['查询', '导出']" @select="selectHandler" v-else @export="exportHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                        style="height:100%" class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="table.dataList"
                        :columnDefs="cfsValue" :localeText="localeTextData" />
                </template>
                <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
                    @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                    :page-size="pagination.pageSize" :current="pagination.page" />
            </PageTabelLayout>
            <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showAdd"
                :mask-closable="false" placement="bottom" @cancel="pageData.showAdd = false">
                <template #title>{{ pageData.sideTitle }}</template>
                <a-form ref="formRef" style="margin-top:20px" layout="horizontal" auto-label-width :model="dataForm">
                    <a-row :gutter="20">
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="退库单号" field="retreatLibraryNum" :rules="[{ message: '退库单号必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input v-model="dataForm.retreatLibraryNum" allow-clear class="aInput" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="仓库名称" field="warehouseName" :rules="[{ message: '仓库名称必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input v-model="dataForm.warehouseName" allow-clear class="aInput" />
                                <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.warehouseName"> 
                                <a-option />
                            </a-select> -->
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="退货类型" field="retreatLibraryType" :rules="[{ message: '退货类型必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input v-model="dataForm.retreatLibraryType" allow-clear class="aInput" />
                                <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.retreatLibraryType">
                                <a-option />
                            </a-select> -->
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="订单号" field="orderNo" :rules="[{ message: '订单号必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInput" v-model="dataForm.orderNo" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="客户名称" field="clientName" :rules="[{ message: '客户名称必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInput" v-model="dataForm.clientName" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="20">
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="开单日期" field="billingTime" :rules="[{ message: '开单日期必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-date-picker  popup-container="html"  v-model="dataForm.billingTime" allow-clear style="width: 270px;" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="客户订单号" field="clientOrder" :rules="[{ message: '客户订单号必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInput" v-model="dataForm.clientOrder" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="流转卡号" field="circulationCard" :rules="[{ message: '流转卡号必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInput" v-model="dataForm.circulationCard" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="计件日期" field="pieceTime" :rules="[{ message: '计件日期必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-date-picker  popup-container="html"  allow-clear class="aInput" v-model="dataForm.pieceTime" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="班组" field="team" :rules="[{ message: '班组必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInput" v-model="dataForm.team" />
                                <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.team">
                                <a-option />
                            </a-select> -->
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="20">
                        <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                            <a-form-item label="收费项" field="chargeItem" :rules="[{ message: '收费项必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInput" v-model="dataForm.chargeItem" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="16" :xl="16" :lg="24" :md="24" :xs="24">
                            <a-form-item label="单价生成明细情况" field="priceDetailed" :rules="[{ message: '单价生成明细情况必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="aInputLine" v-model="dataForm.priceDetailed" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="20">
                        <a-col :xxl="20" :xl="20" :lg="24" :md="24" :xs="24">
                            <a-form-item label="备注">
                                <a-input allow-clear class="aInputLine" v-model="dataForm.remark" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <div class="fbg">
                        <a-row :gutter="20">
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="费用类型" field="costType" :rules="[{ message: '费用类型必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input allow-clear class="aInput" v-model="dataForm.costType" />
                                    <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.costType">
                                    <a-option />
                                </a-select> -->
                                </a-form-item>
                            </a-col>
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="染色单价" field="dyePrice" :rules="[{ message: '染色单价必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                        v-model="dataForm.dyePrice" />
                                </a-form-item>
                            </a-col>
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="耐氯提升单价" field="tsprice" :rules="[{ message: '耐氯提升单价必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                        v-model="dataForm.tsprice" />
                                </a-form-item>
                            </a-col>
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="整理单价" field="sortPrice" :rules="[{ message: '整理单价必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                        v-model="dataForm.sortPrice" />
                                </a-form-item>
                            </a-col>
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="胶袋单价" field="tapePrice" :rules="[{ message: '胶袋单价必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                        v-model="dataForm.tapePrice" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="20">
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="抗黄单价" field="yellowPrice" :rules="[{ message: '抗黄单价必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                        v-model="dataForm.yellowPrice" />
                                </a-form-item>
                            </a-col>
                            <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                                <a-form-item label="纸管单价" field="paperPrice" :rules="[{ message: '纸管单价必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-input allow-clear class="aInput" v-model="dataForm.paperPrice" />
                                </a-form-item>
                            </a-col>
                            <a-col :xxl="12" :xl="12" :lg="24" :md="24" :xs="24">
                                <a-form-item label="单价构成">
                                    <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                        v-model="dataForm.priceForm" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="20">
                            <a-checkbox :value="1"> 进缸 </a-checkbox>
                            <a-checkbox :value="1"> 收染费 </a-checkbox>
                            <a-checkbox :value="1"> 拨印 </a-checkbox>
                            <a-checkbox :value="1"> RC处理 </a-checkbox>
                            <a-checkbox :value="1"> 打包 </a-checkbox>
                            <a-checkbox :value="1"> 一等品 </a-checkbox>
                            <a-checkbox :value="1"> 湿刷 </a-checkbox>
                            <a-checkbox :value="1"> 防粘处理 </a-checkbox>
                        </a-row>
                    </div>
                </a-form>
                <a-tabs   :lazy-load="true" default-active-key="0">
                    <!-- <a-button>新增</a-button> -->
                    <!-- <a-button type="primary" 
                            @click="dataForm.retreatLibraryDetailedList.push({ ...detailItem })">新增</a-button> -->
                    <template #extra>
                        <el-button type="success" :icon="iconText.CirclePlus"
                            @click="dataForm.retreatLibraryDetailedList.push({ ...detailItem })"
                            style="margin-bottom: 10px;background:#67c23a ;">新增</el-button>
                    </template>
                    <a-tab-pane key="0" title="退库明细">
                        <a-table size="small" :columns="createColumns" :data="dataForm.retreatLibraryDetailedList"
                            :pagination="false">
                            <template #clientName="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].clientName" />
                            </template>
                            <template #stuffCodes="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].stuffCodes" />
                            </template>
                            <template #deliveryUnit="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].deliveryUnit" />
                            </template>
                            <template #barCode="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].barCode" />
                            </template>
                            <template #makeNum="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].makeNum" />
                            </template>
                            <template #clothNum="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].clothNum" />
                            </template>
                            <template #productName="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].productName" />
                            </template>
                            <template #colorScale="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].colorScale" />
                            </template>
                            <template #planNo="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].planNo" />
                            </template>
                            <template #yarnCount="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].yarnCount" />
                            </template>
                            <template #doorWidth="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].doorWidth" />
                            </template>
                            <template #gramWeight="{ rowIndex }">
                                <a-input-number :min="0" type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].gramWeight" />
                            </template>
                            <template #size="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].size" />
                            </template>
                            <template #horsesNum="{ rowIndex }">
                                <a-input-number :min="0" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].horsesNum" />
                            </template>
                            <template #yarnbatch="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].yarnbatch" />
                            </template>
                            <template #unitPrice="{ rowIndex }">
                                <a-input-number :min="0" :precision="2" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].unitPrice" />
                            </template>
                            <template #amount="{ rowIndex }">
                                <a-input-number :min="0" :precision="2" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].amount" />
                            </template>
                            <template #initialLocation="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].initialLocation" />
                            </template>
                            <template #initiaTrayCodes="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].initiaTrayCodes" />
                            </template>
                            <template #newLocation="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].newLocation" />
                            </template>
                            <template #newTrayCodes="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].newTrayCodes" />
                            </template>
                            <template #weight="{ rowIndex }">
                                <a-input type="text" class="aInput"
                                    v-model="dataForm.retreatLibraryDetailedList[rowIndex].weight" />
                            </template>
                            <template #action="{ rowIndex }" v-if="dataForm.retreatLibraryDetailedList.length > 1">
                                <el-button type="danger" @click="dataForm.retreatLibraryDetailedList.splice(rowIndex, 1)"
                                    link>删除</el-button>
                            </template>
                        </a-table>
                    </a-tab-pane>
                </a-tabs>
                <template #footer>
                    <a-button size="mini" @click="pageData.showAdd = false">
                        关闭
                    </a-button>
                    <a-button type="primary" size="mini" @click="saveHandler">
                        保存
                    </a-button>
                </template>
            </a-drawer>
        </div>
    </div>
</template>

<script lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { reactive, ref, onMounted } from 'vue'
import emitter from "@/hooks/useEventBus";
import { useTableColumn } from '@/hooks/table'
import { WorkStocks, WSearchData } from '@/interface/workStocksInterface';

import { localeText } from '@/api/aggridZw'
import { assTable } from '@/utils/assemblyLevelTable';
import { FormInstance, Message, Modal } from '@arco-design/web-vue';
import { usePagination, useTable } from '@/hooks/table';
import { workShopStocks } from '@/api/DyeingshopManagement/workshopCancelStocks'
import { CirclePlus } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
export default {
    name: "workshopCancelStocks",
    components: { PageTabelLayout,  },
    setup() {
        const workShopStocksApi = workShopStocks();
        let headerShow = ref<boolean>(true);
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        onMounted(() => {
            pagination.page = 1;
            doRefresh();
        });
        let handlerState = ref<number>(1);
        const selectHandler = () => {
            doRefresh();
        };
        const addHandler = () => {
            pageData.showAdd = true;
            pageData.sideTitle = '新增';
        };
        const formRef = ref<FormInstance>();
        const saveHandler = () => {
            formRef.value?.validate().then(async (err) => {
                if (!err) {
                    // console.log(dataForm)
                    if (dataForm.id) {
                        await workShopStocksApi
                            .editStocks({ ...dataForm })
                            .then((res: any) => {
                                if (res.code === 200) {
                                    formRef.value?.resetFields();
                                    pageData.showAdd = false;
                                    Message.success({
                                        content: "修改成功",
                                        duration: 5000,
                                    });
                                    doRefresh();

                                }
                                else {
                                    Message.error({
                                        content: res.message,
                                        duration: 2000
                                    });
                                }
                            })
                            .catch((res) => {
                                console.log(res);
                            });
                    }
                    else {
                        await workShopStocksApi
                            .addStocks({ ...dataForm })
                            .then((res: any) => {
                                if (res.code === 200) {
                                    formRef.value?.resetFields();
                                    pageData.showAdd = false;
                                    Message.success({
                                        content: "新增成功",
                                        duration: 5000,
                                    });
                                    doRefresh();
                                } else {
                                    Message.error({
                                        content: res.message,
                                        duration: 2000
                                    });
                                }
                            })
                            .catch((res) => {
                                console.log(res);
                            });
                    }
                }
                else {
                    console.log(err);
                }
            });
        };
        let detailItem = {
            horsesNum: 0,
            clientName: '',
            stuffCodes: '',
            deliveryUnit: '',
            makeNum: '',
            clothNum: '',
            productName: '',
            colorScale: '',
            planNo: '',
            yarnCount: '',
            doorWidth: '',
            gramWeight: 0,
            yarnbatch: '',
            unitPrice: 0,
            amount: 0,
            barCode: '',
            initialLocation: '',
            initiaTrayCodes: '',
            newLocation: '',
            newTrayCodes: '',
            weight: '',
            size: ''
        };
        const dataForm = reactive<WorkStocks>({
            id: null,
            warehouseCode: '',
            warehouseName: '',
            retreatLibraryType: '',
            remark: '',
            costType: '',
            retreatLibraryNum: '',
            billingTime: dayjs(Date.now()).format('YYYY-MM-DD'),
            clientOrder: '',
            dyePrice: 0,
            circulationCard: '',
            orderNo: '',
            priceDetailed: '',
            pieceTime: dayjs(Date.now()).format('YYYY-MM-DD'),
            tsprice: 0,
            clientName: '',
            team: '',
            sortPrice: 0,
            chargeItem: '',
            priceForm: 0,
            tapePrice: 0,
            yellowPrice: 0,
            paperPrice: '',
            dutyDep: '',
            retreatLibraryDetailedList: [{ ...detailItem }]
        });

        const searchData = reactive<WSearchData>({
            billingTime: '',
            billingTime2: '',
            retreatLibraryNum: '',
            retreatLibraryType: '',
            clientName: '',
            clothNum: '',
            productName: ''
        });
        const changTime = (date: any) => {
            console.log(date);
        }
        const exportHandler = () => {
            // if (handlerState.value === 1) {
            //     emitter.emit('export-untreated');
            // } else {
            //     emitter.emit('export-processed');
            // }
            let selectList = gridOption.value.getSelectedRows();
            // console.log(selectList);
            if (selectList.length === 0) {
                Message.error('请勾选需要导出的数据')
                return
            } else {
                //导出数据
                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                assTable(cfsValue, nowRow, '车间退库信息');
            }
        };
        const changHandler = (e: number | string) => {
            handlerState.value = +e;
            selectHandler();
        };
        const pageData = reactive<({
            showAdd: boolean,
            pageLoading: boolean,
            sideTitle: string,
        })>({
            showAdd: false,
            sideTitle: "新增",
            pageLoading: false
        });
        const createColumns = useTableColumn([
            {
                title: "客户名称",
                key: "clientName",
                dataIndex: "clientName",
                slotName: "clientName",
                width: 150,
            },
            {
                title: "收料单号",
                key: "stuffCodes",
                dataIndex: "stuffCodes",
                slotName: "stuffCodes",
                width: 150,
            },
            {
                title: "送货单位",
                key: "deliveryUnit",
                dataIndex: "deliveryUnit",
                slotName: "deliveryUnit",
                width: 150,
            },
            {
                title: "条形码",
                key: "barCode",
                dataIndex: "barCode",
                slotName: "barCode",
                width: 150,
            },
            {
                title: "织造序号",
                key: "makeNum",
                dataIndex: "makeNum",
                slotName: "makeNum",
                width: 160,
            },
            {
                title: "布号",
                key: "clothNum",
                dataIndex: "clothNum",
                slotName: "clothNum",
                width: 160,
            },
            {
                title: "品名",
                key: "productName",
                dataIndex: "productName",
                slotName: "productName",
                width: 150,
            },
            {
                title: "色称",
                key: "colorScale",
                dataIndex: "colorScale",
                slotName: "colorScale",
                width: 150,
            },

            {
                title: "计划单号",
                key: "planNo",
                dataIndex: "planNo",
                slotName: "planNo",
                width: 150,
            },
            {
                title: "纱支",
                key: "yarnCount",
                dataIndex: "yarnCount",
                slotName: "yarnCount",
                width: 150,
            },
            {
                title: "门幅",
                key: "doorWidth",
                dataIndex: "doorWidth",
                slotName: "doorWidth",
                width: 150,
            },
            {
                title: "克重",
                key: "gramWeight",
                dataIndex: "gramWeight",
                slotName: "gramWeight",
                width: 150,
            },
            {
                title: "尺寸",
                key: "size",
                dataIndex: "size",
                slotName: "size",
                width: 150,
            },
            {
                title: "匹数",
                key: "horsesNum",
                dataIndex: "horsesNum",
                slotName: "horsesNum",
                width: 150,
            },
            {
                title: "纱批",
                key: "yarnbatch",
                dataIndex: "yarnbatch",
                slotName: "yarnbatch",
                width: 150,
            },
            {
                title: "单价",
                key: "unitPrice",
                dataIndex: "unitPrice",
                slotName: "unitPrice",
                width: 150,
            },
            {
                title: "金额",
                key: "amount",
                dataIndex: "amount",
                slotName: "amount",
                width: 150,
            },
            {
                title: "原储位",
                key: "initialLocation",
                dataIndex: "initialLocation",
                slotName: "initialLocation",
                width: 150,
            },
            {
                title: "原布笼编号",
                key: "initiaTrayCodes",
                dataIndex: "initiaTrayCodes",
                slotName: "initiaTrayCodes",
                width: 150,
            },
            {
                title: "新储位",
                key: "newLocation",
                dataIndex: "newLocation",
                slotName: "newLocation",
                width: 150,
            },
            {
                title: "新布笼编号",
                key: "newTrayCodes",
                dataIndex: "newTrayCodes",
                slotName: "newTrayCodes",
                width: 150,
            },
            {
                title: "验后重量",
                key: "weight",
                dataIndex: "weight",
                slotName: "weight",
                width: 150,
            },
            {
                title: "操作",
                key: "action",
                dataIndex: "action",
                slotName: "action",
                width: 150,
                fixed: "right",
            },
        ]);

        const table = useTable();
        const doRefresh = async () => {
            // workShopStocksApi
            pageData.pageLoading = true;
            await workShopStocksApi.getStocksList({
                page: pagination.page,
                size: pagination.pageSize,
            }, { deleteState: 0, ...searchData }).then(({ data, code }) => {
                console.log(data.records);
                if (code === 200) {
                    // gridOption.value.sizeColumnsToFit();
                    table.handleSuccess(data.data.records);
                    gridOption.value.setRowData(data.data.records);
                    total.value = data.data.total;
                }
            }).catch(console.log)
                .finally(() => {
                    pageData.pageLoading = false;
                });
        };
        const editHandler = async (data: any) => {
            await workShopStocksApi.getStocksItem({ id: data.id }).then((res: any) => {
                // console.log(res);
                if (res.code === 200) {
                    let resData = res.data.list;
                    for (let key in resData) {
                        dataForm[key] = resData[key];
                    };
                    pageData.showAdd = true;
                    pageData.sideTitle = '编辑';
                } else {
                    Message.error(res.message);
                }
            })
        };

        const delHandler = () => {
            let vals = gridOption.value.getSelectedRows().map((v: any) => { return v.id });
            if (vals.length > 0) {
                Modal.confirm({
                    title: "提示",
                    content: "确定要批量删除选中数据吗？",
                    cancelText: "取消",
                    okText: "删除",
                    onOk: async () => {
                        const promises = vals.map((id: any) => {
                            return workShopStocksApi.delStocks(id);
                        });
                        Promise.all(promises).then((res: any) => {
                            let resStatus = res.every((v: any) => v.code === 200)
                            if (resStatus) {
                                Message.success("数据删除成功");
                                pagination.page = 1;
                                doRefresh();
                            }
                            else {
                                Message.error("数据删除失败");
                            }
                        }).catch(error => {
                            console.log(error)
                        });
                    },
                });
            } else {
                Message.info("请选择需要删除的数据");
            }
        };

        const setDelHandler = (id: any) => {
            Modal.confirm({
                title: "提示",
                content: "确定要删除选中数据吗？",
                cancelText: "取消",
                okText: "删除",
                onOk: async () => {
                    await workShopStocksApi.delStocks(id).then((res) => {
                        if (res.code === 200) {
                            Message.success("数据删除成功");
                            pagination.page = 1;
                            doRefresh();
                        } else {
                            Message.error("数据删除失败");
                        }
                    });
                },
            });
        };



        const pagination = usePagination(doRefresh);
        //表格方面
        const gridOption = ref();
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            //调整表格自适应大小
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150
        };
        let cfsValue: any = [
            {
                headerName: '仓库名称',
                field: 'warehouseName',
            },
            {
                headerName: "退库类型",
                field: "retreatLibraryType",
            },
            {
                headerName: "费用类型",
                field: "costType",
            },
            {
                headerName: "开单时间",
                field: "billingTime",
            },
            {
                headerName: "退库单号",
                field: "retreatLibraryNum",
            },
            {
                headerName: "流转卡号",
                field: "circulationCard",
            },
            {
                headerName: "客户名称",
                field: "clientName",
            },
            {
                headerName: "收料单号",
                field: "stuffCodes",
            },
            {
                headerName: "织造序号",
                field: "makeNum",
            },
            {
                headerName: "布号",
                field: "clothNum",
            },
            {
                headerName: "品名",
                field: "productName",
            },
            {
                headerName: "匹数",
                field: "horsesNum",
            },
            {
                headerName: "色称",
                field: "colorScale",
            },
            {
                headerName: "计划单号",
                field: "planNo",
            },
            {
                headerName: "纱支",
                field: "yarnCount",
            },

            {
                headerName: "门幅",
                field: "doorWidth",
            },
            {
                headerName: "克重",
                field: "gramWeight",
            },
            {
                headerName: "纱批",
                field: "yarnbatch",
            },
            {
                headerName: "单价",
                field: "unitPrice",
            },

            {
                headerName: "原库位",
                field: "initialLocation",
            },
            {
                headerName: "原托盘编码",
                field: "initiaTrayCodes",
            },
            {
                headerName: "新托盘编码",
                field: "newTrayCodes",
            },
            {
                headerName: "验后重量",
                field: "weight",
            },
            {
                headerName: "尺寸",
                field: "size",
            },
            {
                headerName: '操作',
                pinned: 'right',
                sortable: false,
                resizable: false,
                filter: false,
                width: 150,
                lockPosition: "right",
                cellRenderer: {
                    template: `
                       <a-row align="center" justify="space-between"> 
                        <a-col :span="12">
                            <el-button style="color:#165dff;" link @click="a">修 改</el-button>
                        </a-col>
                        <a-col :span="12">
                            <el-button type="danger" link @click="b">删除</el-button>
                         </a-col>
                      </a-row> 
                    `,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data);
                        };
                        const b = () => {
                            setDelHandler(props.params.data.id);
                        }
                        return {
                            a,
                            b
                        }
                    }
                }
            },
        ];
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        };
        const localeTextData: any = ref(localeText);
        let iconText: any = {
            CirclePlus
        }
        return {
            headerShow,
            selectHandler,
            changHeadShow,
            addHandler,
            exportHandler,
            changHandler,
            handlerState,
            pageData,
            saveHandler,
            dataForm,
            createColumns,
            searchData,
            changTime,
            table,
            pagination,
            gridOption,
            gridReady,
            defaultColDef,
            cfsValue,
            total,
            changePage,
            changeSize,
            localeTextData,
            formRef,
            detailItem,
            iconText,
            delHandler
        }
    },
}
</script>

<style  scoped>
.fbg {
    background: rgb(242, 247, 255);
    margin: 200x 0px;
    padding: 20px;
}

.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}


.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
</style>